<template>
  <a-modal
    title="导出采集设备"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="请上传导入文件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
          style="text-align: left"
        >
          <a-modal :visible="previewVisible" :footer="null" @cancel="previewCancel">
            <img alt="example" style="width: 100%" :src="previewImage"/>
          </a-modal>
          <a-upload
            name="fileId"
            :customRequest="customRequest"
            list-type="text"
            :show-upload-list="true"
            :file-list="fileList"
            :multiple="false"
            @change="change"
          >
            <a-button>
              上传
            </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { importGateway } from '@/api/modular/main/bizgateway/bizGatewayManage'
  import { sysFileInfoUpload } from '@/api/modular/system/fileManage'

  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        groupCodeList: {},
        form: this.$form.createForm(this),
        stationTree: [],
        treeLoading: true,
        fileId: 0,
        previewVisible: false,
        previewImage: '',
        fileList: [],
        loading: false,
        stationId: 0
      }
    },

    created () {
    },

    methods: {
      init (stationId) {
        this.stationId = stationId
        this.visible = true
      },
      /**
       * 上传文件
       */
      customRequest (data) {
        const formData = new FormData()
        formData.append('file', data.file)
        sysFileInfoUpload(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.fileId = res.data
            data.onSuccess(res, data.file)
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      /**
       * 上传文件
       */
      customRequestById (data) {
        const formData = new FormData()
        formData.append('file', data.file)
        sysFileInfoUpload(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.fileId = res.data
            data.onSuccess(res, data.file)
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            this.confirmLoading = true
            importGateway({
              fileId: this.fileId,
              stationId: this.stationId
            }).then((res) => {
              this.confirmLoading = false
              if (res.success) {
                this.$message.success('导入成功')
                this.handleCancel()
                this.$emit('ok', values)
              } else {
                this.$message.info('导入失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.fileList = []
      },
      getBase64 (file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => resolve(reader.result)
          reader.onerror = error => reject(error)
        })
      },
      previewCancel () {
        this.previewVisible = false
      },
      async handlePreview (file) {
        if (!file.url && !file.preview) {
          file.preview = await this.getBase64(file.originFileObj)
        }
        this.previewImage = file.url || file.preview
        this.previewVisible = true
      },
      change ({ fileList }) {
        this.fileList = []
        this.fileList.push(fileList[fileList.length - 1])
      }
    }
  }
</script>
